<template>
	<view class="right-box">
		<view class="header ">
			<span class="header__title">控制台</span>
		</view>
		<view class="right-content">
			<div id="editormd"></div>
		</view>
	</view>
</template>

<script>
	import {
		config
	} from '@/common/mockConfig.js';
	export default {
		props: {
			showRightWindow: {
				type: Boolean
			}
		},
		data() {
			return {

			}
		},
		watch: {
			showRightWindow(val) {
				this.editorInit()
			}
		},
		created() {},
		mounted() {
			setTimeout(() => {
				this.editorInit()
			}, 500)
		},
		methods: {
			editorInit() {
				this.testEditor = editormd('editormd', {
					...config,
					readOnly: true,
					markdown: '暂无输出内容，请点击测试运行生成测试内容！',
					editorTheme: 'tomorrow-night-eighties',
				});
				uni.$on('buildValue', (data) => {
					if (this.testEditor) {
						this.testEditor.setValue('// 当前内容仅供查看测试返回是否正确，不支持复制和其他操作。\n' + JSON.stringify(data, null,
							4))
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.right-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex-shrink: 0;
		width: 400px;
		height: calc(100vh - 55px);
		border-left: 1px #eee solid;
		box-sizing: border-box;
		overflow: hidden;

		.header {
			flex-shrink: 0;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 15px;
			border-bottom: 1px #eee solid;
			background-color: #FFFFFF;

			&__title {
				font-size: 16px;
				color: #2C405A;
			}

			&__button-group {
				display: flex;

				button {
					color: #fff;
					font-size: 12px;
					margin-right: 15px;
					border: 1px #F0AD4E solid;
					background-color: #F0AD4E;
					box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.2);

					&.primary {
						background-color: #007aff;
						border: 1px #007aff solid;
					}

					&::after {
						border: none;
					}
				}
			}
		}

		.right-content {
			flex: 1;
			overflow: hidden;
			background-color: #000;
		}
	}

	.editormd {
		margin: 0;
		border: none;
	}
</style>
